<template>
  <div>
    <div class="top">
      <div v-show="!show" id="J_prismPlayer" class="prism-player"></div>
      <p v-if="show" @click="free">免费试听</p>
    </div>
    <div class="list">
      <div :class="{active: which_to_show == 'Jie'}" @click="showJie()">课程介绍</div>
      <div :class="{active: which_to_show == 'Mu'}" @click="showMu()">课程目录</div>
      <div :class="{active: which_to_show == 'Pin'}" @click="showPin()">评价</div>
    </div>
    <component
      v-bind:is="which_to_show"
      :id="id"
      :detail="detail"
      @change="getV"
      :active.sync="active"
    ></component>
  </div>
</template>

<script>
import Jie from "@/views/kejie.vue";
import Mu from "@/views/kemu.vue";
import Pin from "@/views/pinjia.vue";
import { wxShare } from "@/mixin/share";
import { setTimeout } from "timers";
import cookies from "vue-cookies";
export default {
  name: "kecheng",
  components: {
    Jie,
    Mu,
    Pin
  },
  mixins: [wxShare],
  data() {
    return {
      which_to_show: "Jie",
      activeName: "a",
      plater: "",
      detail: {},
      show: "",
      active: ""
    };
  },
  props: ["id"],
  async mounted() {
    let _this = this;
    let res = await this.$http.post(`api/index/video_introduce`, {
      course_id: this.id
    });
    this.detail = res.data;
    let res2 = await this.$http.post(`api/index/get_playAuth`, {
      course_id: this.id
    });
    const saveTime = function (memoryVideo,currentTime) {
      localStorage.setItem(memoryVideo, currentTime);
    }
    const getTime = function (memoryVideo) {
      //return返回的是自定义起播时间
      return localStorage.getItem(memoryVideo)
    }
    this.vid = res2.data.videoId,
    this.player = new Aliplayer({
      id: "J_prismPlayer",
      width: "100%",
      height: "210px",
      autoplay:false,
      x5_type: true,
      x5_fullscreen: true,
      qualitySort: "asc",
      format: "mp4",
      mediaType: "video",
      rePlay: false,
      playsinline: true,
      preload: true,
      controlBarVisibility: "hover",
      useFlashPrism: false,
      useH5Prism: true,
      "object-fit": "fill",
      //播放方式一：推荐
      prismType: 2,
      showBarTime: 1000,
      cover: res2.data.img,
      vid: res2.data.videoId,
      playauth: res2.data.UploadAuth,
      skinLayout: [
        { name: "bigPlayButton", align: "blabs", x: 155.5, y: 73 },
        {
          name: "H5Loading",
          align: "cc"
        },
        {
          name: "controlBar",
          align: "blabs",
          x: 0,
          y: 0,
          children: [
            { name: "progress", align: "tlabs", x: 0, y: 0 }, //隐藏进度条
            { name: "playButton", align: "tl", x: 15, y: 13 },
            { name: "timeDisplay", align: "tl", x: 10, y: 6 },
            { name: "fullScreenButton", align: "tr", x: 20, y: 12.5 }
          ]
        }
      ],
      components: [{
        name: 'MemoryPlayComponent',
        type: AliPlayerComponent.MemoryPlayComponent,
        args: [false,getTime,saveTime]
      }]
    });
    // this.player.on("canplay", () => {
    //   _this.show = false;
    //   _this.player.play();
    // });
    this.player.on("ended", () => {
      _this.change();
    });
    console.log(this.player,'this.player')
    if (res.data.is_buy) {
      this.show = false;
      this.player.play();
    } else {
      this.show = true;
    }
    document.addEventListener('visibilitychange',this.handleVisiable)
  },
  destroyed() {
    document.removeEventListener('visibilitychange', this.handleVisiable)
  },
  beforeRouteLeave (to, from, next) {
    localStorage.setItem(this.vid, this.player.getCurrentTime());
    next()
  },
  methods: {
    async change() {
      let res = await this.$http.post(`api/index/get_next`, {
        lesson_id: this.active,
        type: 1
      });
      if (res) {
        this.player.replayByVidAndPlayAuth(
          res.data.videoId,
          res.data.UploadAuth
        );
        this.$nextTick(() => {

          this.player.play();
        });
        this.active = id;
      }
    },
    async getV(id) {
      this.show = false;
      if (this.player && id == this.active) {

        this.player.play();
        return;
      }
      let res2 = await this.$http.post(`api/index/get_playAuth`, {
        course_id: this.id,
        lesson_id: id
      });
      if (res2 && this.player) {
        this.player.replayByVidAndPlayAuth(
          res2.data.videoId,
          res2.data.UploadAuth
        );

        this.player.play();
        this.active = id;
      }
    },
    showJie() {
      this.which_to_show = "Jie";
    },
    showMu() {
      this.which_to_show = "Mu";
    },
    showPin() {
      this.which_to_show = "Pin";
    },
    free() {
      this.show = false;
      this.player.play();
    },
    handleVisiable(e){
      if (e.target.visibilityState === 'visible') {
        this.show = false;
        this.player.play();
      }else{
        this.player.pause();
      }
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.van-nav-bar {
  text-align: left;
  background: rgba(242, 242, 242, 1);
}
.van-nav-bar__left .van-nav-bar__text {
  color: black;
  font-size: 3rem;
}
.van-nav-bar__title {
  max-width: 70%;
  margin-left: 50px;
}
.van-icon,
.van-icon::before {
  font-size: 20px;
  color: black;
}
.van-icon-arrow:before {
  font-size: 1.5rem;
  color: rgba(210, 210, 210, 1);
}
.van-cell {
  padding: 20px 16px;
}
.van-cell__left-icon {
  font-size: 0.5rem;
}
.van-cell__title {
  font-family: PingFang SC;
  font-size: 1rem;
}
.top {
  width: 100%;
  height: 210px;
  background: #383838;
  position: relative;
}
.top span {
  width: 100%;
  height: 210px;
}
.top p {
  width: 150px;
  height: 50px;
  background: #0b19fe;
  font-size: 15px;
  color: #f2f2f2;
  text-align: center;
  line-height: 50px;
  border-radius: 25px;
  font-weight: bold;
  position: absolute;
  top: 80px;
  left: 112.5px;
  z-index: 999;
}
.list {
  height: 52px;
  padding: 0 15px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  justify-content: space-between;
}
.list > div {
  width: 66px;
  text-align: center;
}
.list div {
  line-height: 52px;
  position: relative;
}
.list .active::after {
  content: "";
  width: 66px;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50%;
  background: #334fff;
}
.list {
  height: 52px;
  color: #333333;
  font-size: 15px;
  font-weight: 500;
}
.list .active {
  color: #334fff;
}
.list li:hover {
  border-bottom: 3px solid #334fff;
}
</style>
